<template>
  <el-drawer
    :close-on-press-escape="false"
    v-model="isVisible"
    :size="props.size"
    :title="props.title"
  >
    <slot />
    <template #footer v-if="hasFooter">
      <span class="dialog-footer">
        <el-button @click="handleClose" :disabled="props.cancelDisabled">
          取消
        </el-button>
        <el-button
          type="primary"
          @click="handleConfirm"
          :disabled="props.confirmDisabled"
        >
          确定
        </el-button>
      </span>
    </template>
  </el-drawer>
</template>

<script lang="ts" setup>
import { computed } from 'vue'

const props = defineProps({
  title: {
    type: String,
    default: '提示',
  },
  size: {
    type: [Number, String],
    default: '20%',
  },
  visible: {
    type: Boolean,
    default: false,
  },
  hasFooter: {
    type: Boolean,
    default: false,
  },
  confirmDisabled: {
    type: Boolean,
    default: false,
  },
  cancelDisabled: {
    type: Boolean,
    default: false,
  },
})

interface EmitsType {
  (e: 'confirm'): void
  (e: 'update:visible', value: boolean): void
}
const emit = defineEmits<EmitsType>()

const isVisible = computed({
  get() {
    return props.visible
  },
  set(value) {
    emit('update:visible', value)
  },
})

const handleConfirm = () => {
  if (props.confirmDisabled) return
  emit('confirm')
}

const handleClose = () => {
  if (props.cancelDisabled) return
  isVisible.value = false
}
</script>

<style lang="scss" scoped></style>
